<template>
  <zeda-dialog
    v-model="visible"
    title="路由导航配置"
    width="500px"
    :before-close="handleClose"
  >
    <!-- <aps-form
      :config="apsForm.formConfig"
      :model="apsForm.formData"
      :formRef="apsForm.formRef"
      :labelWidth="apsForm.labelWidth"
      ref="form"
    ></aps-form> -->
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="路由导航">
        <el-tree
          class="tree-border"
          :data="menuOptions"
          show-checkbox
          ref="menu"
          node-key="id"
          :check-strictly="!form.menuCheckStrictly"
          empty-text="加载中，请稍候"
          :props="defaultProps"
        ></el-tree>
      </el-form-item>
    </el-form>
    <form-button
      slot="footer"
      :loading="loading"
      @cancel="handleClose"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { getDynamicMenutree, addBindRole } from "@/api/navset/index.js";
import FormButton from "@/components/FormButton";
export default {
  dicts: [],
  components: {
    FormButton,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false, // 按钮加载中判断
      form: {
        menuArr: [],
        menuCheckStrictly: true, // 父子联动
      },
      rules: {},
      // 菜单列表
      menuOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          if (String(this.id).length > 0) {
            this.getInfo();
          }
        }
      },
      deep: false,
      immediate: false,
    },
  },
  methods: {
    getInfo() {
      this.menuOptions = [];
      getDynamicMenutree(this.id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          console.log(arr, "1231231");
          if (arr.length > 0) {
            // 赋予树data
            arr.map((item) => {
              let obj = {
                label: item?.siteName,
                id: item?.id + 500000000,
              };
              if (item.dynamicMenuConfigItemVos.length > 0) {
                obj.children = [];
                item.dynamicMenuConfigItemVos.map((tig) => {
                  let tigobj = {
                    label: tig?.name + "-" + tig?.subheading ?? "未知副标题",
                    id: tig?.id,
                    exlabel: tig?.name,
                  };
                  obj.children.push(tigobj);
                  tigobj.children = [];
                  if (tig.children && tig.children.length > 0) {
                    tig.children.map((pig) => {
                      let pigobj = {
                        label:
                          pig?.name + "-" + pig?.subheading ?? "未知副标题",
                        id: pig?.id,
                        exlabel: pig?.name,
                      };
                      tigobj.children.push(pigobj);
                    });
                  }
                });
              }
              this.menuOptions.push(obj);
            });
            // 赋予树data checked
            this.$nextTick(() => {
              this.checkDeal(arr);
            });
          }
          console.log(this.menuOptions, "menuOptions");
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    checkDeal(arr) {
      arr.map((item) => {
        if (item.dynamicMenuConfigItemVos.length > 0) {
          item.dynamicMenuConfigItemVos.map((tig) => {
            this.$nextTick(() => {
              let falge = tig?.selected ?? false;
              let id = tig.id;
              this.$refs.menu.setChecked(id, falge, false);
            });
            if (tig.children && tig.children.length > 0) {
              tig.children.map((pig) => {
                let falge1 = pig?.selected ?? false;
                let id1 = pig.id;
                this.$refs.menu.setChecked(id1, falge1, false);
              });
            }
          });
        }
      });
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    submit() {
      let arr = this.getMenuAllCheckedKeys();
      let data = {
        dynamicMenuConfigItemRequests: [],
        roleId: null,
      };
      data.roleId = this.id;
      let brr = [];
      if (arr.length > 0) {
        arr.map((item) => {
          if (item < 500000000) {
            let obj = {
              id: item,
            };
            brr.push(obj);
          }
        });
      }
      data.dynamicMenuConfigItemRequests = [...brr];
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.addRequest(data);
        } else {
          return false;
        }
      });
    },
    addRequest(data) {
      addBindRole(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.loading = false;
          this.$message.success("操作成功");
          this.handleClose(true);
        })
        .catch(() => {
          this.loading = false;
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .map {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>
